<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Product details</title>
    <!--google fonts-->
    <!--<link href="https://fonts.googleapis.com/css?family=PT+Serif|Open+Sans" rel="stylesheet">-->

    <!--font-awesome CDN-->
    <!--<link href="//netdna.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">-->
    <!--font-awesome-->
    <link href="styles/css/font-awesome.min.css" rel="stylesheet">

    <!--slick-->
    <link rel="stylesheet" href="lib/slick/slick.css">
    <link rel="stylesheet" href="lib/slick/slick-theme.css">

    <link rel="stylesheet" href="scss/utils/Main.css">
    <link rel="stylesheet" href="scss/utils/Client.css">

</head>
<body class="has-client-header has-client-nav has-client-footer">

<main role="main">
    <section>
        <div class="container">
            <div class="section-title section-product-title">Women cotton linen casual loose fitting summer dress</div>
        </div>
    </section>

    <section class="section-product-info">
        <div class="container">
            <div class="row">
                <div class="col-xs-12 col-sm-6">
                    <div class="details-slider">
                        <div class="details-slide-for">
                            <i class="fa fa-search-plus font-rem-1-8"></i>
                            <a href="images/big/big.jpg" target="_blank"><img src="images/md/index.jpg" rel="images/big/big.jpg" alt="" class="imgzoom"></a>
                        </div>
                        <div class="details-slider-nav">
                            <div><img src="images/sm/sm.jpg" alt="product img tab" md="images/md/index.jpg" big="images/big/big.jpg"></div>
                            <div><img src="images/sm/sm-1.jpg" alt="product img tab" md="images/md/index-1.jpg"  big="images/big/big-1.jpg"></div>
                            <div><img src="images/sm/sm.jpg" alt="product img tab" md="images/md/index.jpg"  big="images/big/big.jpg"></div>
                            <div><img src="images/sm/sm-1.jpg" alt="product img tab" md="images/md/index-1.jpg"  big="images/big/big-1.jpg"></div>
                            <div><img src="images/sm/sm.jpg" alt="product img tab" md="images/md/index.jpg"  big="images/big/big.jpg"></div>
                            <div><img src="images/sm/sm.jpg" alt="product img tab" md="images/md/index.jpg"  big="images/big/big.jpg"></div>
                            <div><img src="images/sm/sm.jpg" alt="product img tab" md="images/md/index.jpg"  big="images/big/big.jpg"></div>
                        </div>
                    </div>
                </div>
                <div class="details-content col-xs-12 col-sm-6">
                    <ul class="list-unstyled details-main-list">
                        <li class="title">Women cotton linen casual loose fitting summer dress</li>
                        <li class="original-price"><span class="line-through">Original price: $40</span></li>
                        <li class="promotional-price"><span>Promotional price: </span><strong>$30</strong></li>
                        <li class="availability"><span class="uppercase">AVAILABILITY: </span><strong class="color-pink">10000</strong></li>
                    </ul>
                    <form action="" id="place_an_order">
                        <div class="form-group">
                            <label class="control-label">colour</label>
                            <div class="row">
                                <div class="pr col-xs-12 col-sm-6 col-md-4 col-lg-3">
                                    <select name="color" class="form-control">
                                        <option value="">Select</option>
                                        <option value="black">Black</option>
                                    </select>
                                    <i class="fa fa-caret-down select-caret color-pink"></i>
                                </div>
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="control-label">Size</label>
                            <div class="row">
                                <div class="pr col-xs-12 col-sm-10 col-md-6">
                                    <select name="size" class="form-control">
                                        <option value="">Select</option>
                                        <option value="xl/2xl">XL/2XL(Fit for EU 46-52,US16-22)</option>
                                    </select>
                                    <i class="fa fa-caret-down select-caret color-pink"></i>
                                </div>
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="control-label">Quantity</label>
                            <div class="row">
                                <div class="col-xs-12 col-sm-4">
                                    <!-- // spinner plugin DOM -->
                                    <div class="form-group">
                                        <div class="input-group" data-trigger="spinner">
                                            <span class="input-group-addon"><a href="javascript:void(0);" data-spin="down" class="spin-down"><i class="fa fa-minus"></i></a></span>
                                            <input type="text" value="1" data-rule="quantity" class="form-control text-center" name="quantity">
                                            <span class="input-group-addon"><a href="javascript:void(0);" data-spin="up" class="spin-up"><i class="fa fa-plus"></i></a></span>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-xs-12 col-sm-7">
                                    <button type="submit" class="btn btn-fill-primary uppercase"><i class="fa fa-user"></i> ADD TO CART</button>
                                    <button type="button" class="btn btn-clean btn-follow" aria-controls="follow"><i class="fa fa-heart"></i></button>
                                    <!--<button type="button" class="btn btn-clean focus btn-collect" aria-controls="follow"><i class="fa fa-heart"></i></button>-->
                                </div>
                            </div>
                        </div>
                    </form>

                    <div class="share">
                        <span>Share</span>
                        <ul class="list-inline list-unstyled footer-log">
                            <li><a href="#" title="facebook"><i class="fa fa-facebook"></i></a></li>
                            <li><a href="#" title="twitter"><i class="fa fa-twitter"></i></a></li>
                            <li><a href="#" title="pinterest"><i class="fa fa-pinterest"></i></a></li>
                            <li><a href="#" title="google"><i class="fa fa-google-plus"></i></a></li>
                            <li><a href="#" title="instagram"><i class="fa fa-instagram"></i></a></li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <section>
        <div class="container">
            <div id="follow-wrapper">
                <form action="" id="follow">
                    <div class="form-group">
                        <input type="hidden" name="follow">
                        <button type="submit" class="btn btn-default">Submit</button>
                    </div>
                </form>
            </div>
        </div>
    </section>

    <section class="section-description">
        <div class="container">
            <ul class="nav nav-tabs">
                <li role="presentation" class="active"><a href="#description" data-toggle="tab" role="tab" aria-controls="description">Description</a></li>
                <li role="presentation"><a href="#reviews" data-toggle="tab" role="tab" aria-controls="reviews">Reviews (2)</a></li>
            </ul>
            <div class="tab-content">
                <div class="tab-pane fade in active" id="description">
                    <article>
                        <div class="tab-pane-title">
                            Product Description
                        </div>
                        <p>
                            Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.
                        </p>
                    </article>
                </div>
                <div class="tab-pane fade" id="reviews">
                    <h4 class="uppercase">BE THE FIRST TO REVIEW “SHORT SLEEVED HOODIE WITH STEP HEM”</h4>
                    <form action="" id="commodity">
                        <fieldset>
                            <div class="form-group clearfix">
                                <label class="control-label fl">Commodity score</label>
                                <input type="hidden" name="commodity_score">
                                <div class="clearfix rating-container fl">
                                    <em class="rating fl" data-output="commodity_score">
                                        <span class="star"></span>
                                        <span class="star"></span>
                                        <span class="star focus"></span>
                                        <span class="star"></span>
                                        <span class="star"></span>
                                    </em>
                                </div>
                            </div>
                        </fieldset>
                        <fieldset>
                            <div class="fieldset-title">
                                reviews for Premium Quality
                            </div>
                            <ul class="list-unstyled fieldset-list">
                                <li>
                                    <div class="fieldset-list-header">
                                        <input type="hidden" name="premium_quality[0]">
                                        <span class="fieldset-list-author"><span class="name">Andrew</span> - June 7, 2014</span>
                                        <div class="clearfix rating-container fr">
                                            <em class="rating fl" data-output="premium_quality[0]">
                                                <span class="star"></span>
                                                <span class="star"></span>
                                                <span class="star focus"></span>
                                                <span class="star"></span>
                                                <span class="star"></span>
                                            </em>
                                        </div>
                                    </div>
                                    <div class="filedset-list-content">
                                        <article>
                                            <p>Wonderful quality, and an awesome design. WooThemes ftw!</p>
                                        </article>
                                    </div>
                                </li>
                                <li>
                                    <div class="fieldset-list-header">
                                        <input type="hidden" name="premium_quality[1]">
                                        <span class="fieldset-list-author"><span class="name">Andrew</span> - June 7, 2014</span>
                                        <div class="clearfix rating-container fr">
                                            <em class="rating fl" data-output="premium_quality[1]">
                                                <span class="star"></span>
                                                <span class="star"></span>
                                                <span class="star focus"></span>
                                                <span class="star"></span>
                                                <span class="star"></span>
                                            </em>
                                        </div>

                                    </div>
                                    <div class="filedset-list-content">
                                        <article>
                                            <p>This t-shirt is awesome! Would recommend to everyone!</p>
                                            <p>I’m ordering mine next week</p>
                                        </article>
                                    </div>
                                </li>
                            </ul>
                        </fieldset>
                        <fieldset>
                            <div class="form-group">
                                <label class="control-label font-rem-1-8">Your rating</label>
                                <input type="hidden" name="rating">
                                <div class="clearfix rating-container">
                                    <em class="rating fl" data-output="rating">
                                        <span class="star"></span>
                                        <span class="star"></span>
                                        <span class="star focus"></span>
                                        <span class="star"></span>
                                        <span class="star"></span>
                                    </em>
                                    <!--<span class="rating-score">非常好</span>-->
                                </div>
                            </div>
                        </fieldset>
                        <fieldset class="row main-form">
                            <div class="form-group col-xs-12">
                                <label class="control-label">Your review *</label>
                                <textarea name="reviews" class="form-control" rows="4" placeholder="Your review"></textarea>
                            </div>
                            <div class="form-group col-xs-12 col-sm-6">
                                <label class="control-label">Name *</label>
                                <input type="text" class="form-control" name="name" placeholder="Name">
                            </div>
                            <div class="form-group col-xs-12 col-sm-6">
                                <label class="control-label">Email *</label>
                                <input type="email" class="form-control" placeholder="E-mail" name="email">
                            </div>
                            <div class="form-actions col-xs-12">
                                <button type="submit" class="btn btn-fill-default font-rem-1-8">Add Comment</button>
                            </div>
                        </fieldset>
                    </form>
                </div>
            </div>
        </div>
    </section>

    <section class="section-more margin-footer">
        <div class="container">
            <div class="section-title">More form this collection</div>
            <div class="list-group commodity-list-group row">
                <div class="list-group-item col-xs-12 col-sm-6 col-md-3">
                    <div class="content-img">
                        <a href="#" class="item-img-link">
                            <img src="images/client-1.png" alt="" class="item-img">
                            <div class="item-img-link-hover">
                                <button type="button" class="btn btn-clean" title="Add to shopping cart"><i class="fa fa-shopping-bag font-rem-1-8"></i></button>
                            </div>
                        </a>
                    </div>
                    <div class="content-describe text-center">
                        <div class="content-describe-title font-rem-1-6">
                            <a href="#" title="Pilot Jacket In Woven Fabric">Pilot Jacket In Woven Fabric</a>
                        </div>
                        <div class="content-describe-price color-pink font-rem-1-8">$66.00</div>
                    </div>
                </div>
                <div class="list-group-item col-xs-12 col-sm-6 col-md-3">
                    <div class="content-img">
                        <a href="#" class="item-img-link">
                            <img src="images/client-1.png" alt="" class="item-img">
                            <div class="item-img-link-hover">
                                <button type="button" class="btn btn-clean" title="Add to shopping cart"><i class="fa fa-shopping-bag font-rem-1-8"></i></button>
                            </div>
                        </a>
                    </div>
                    <div class="content-describe text-center">
                        <div class="content-describe-title font-rem-1-6">
                            <a href="#" title="Pilot Jacket In Woven Fabric">Pilot Jacket In Woven Fabric</a>
                        </div>
                        <div class="content-describe-price color-pink font-rem-1-8">$66.00</div>
                    </div>
                </div>
                <div class="list-group-item col-xs-12 col-sm-6 col-md-3">
                    <div class="content-img">
                        <a href="#" class="item-img-link">
                            <img src="images/client-1.png" alt="" class="item-img">
                            <div class="item-img-link-hover">
                                <button type="button" class="btn btn-clean" title="Add to shopping cart"><i class="fa fa-shopping-bag font-rem-1-8"></i></button>
                            </div>
                        </a>
                    </div>
                    <div class="content-describe text-center">
                        <div class="content-describe-title font-rem-1-6">
                            <a href="#" title="Pilot Jacket In Woven Fabric">Pilot Jacket In Woven Fabric</a>
                        </div>
                        <div class="content-describe-price color-pink font-rem-1-8">$66.00</div>
                    </div>
                </div>
                <div class="list-group-item col-xs-12 col-sm-6 col-md-3">
                    <div class="content-img">
                        <a href="#" class="item-img-link">
                            <img src="images/client-1.png" alt="" class="item-img">
                            <div class="item-img-link-hover">
                                <button type="button" class="btn btn-clean" title="Add to shopping cart"><i class="fa fa-shopping-bag font-rem-1-8"></i></button>
                            </div>
                        </a>
                    </div>
                    <div class="content-describe text-center">
                        <div class="content-describe-title font-rem-1-6">
                            <a href="#" title="Pilot Jacket In Woven Fabric">Pilot Jacket In Woven Fabric</a>
                        </div>
                        <div class="content-describe-price color-pink font-rem-1-8">$66.00</div>
                    </div>
                </div>
            </div>
            <nav aria-label="Page navigation" class="clearfix">
                <ul class="pagination pagination-sm fr">
                    <li>
                        <a href="#" aria-label="Previous">
                            <span aria-hidden="true">&lt;</span>
                        </a>
                    </li>
                   <!-- <li class="active"><a href="#">1</a></li>
                    <li><a href="#">2</a></li>
                    <li><a href="#">3</a></li>
                    <li><a href="#">4</a></li>
                    <li><a href="#">5</a></li>-->
                    <li>
                        <a href="#" aria-label="Next">
                            <span aria-hidden="true">&gt;</span>
                        </a>
                    </li>
                </ul>
            </nav>
        </div>
    </section>

</main>

<script src="lib/jquery.1.12.4.min.js"></script>
<script src="lib/jquery.spinner.min.js"></script>
<script src="lib/bootstrap.min.js"></script>
<script src="lib/jquery.validate.min.js"></script>
<script src="lib/slick/slick.min.js"></script>
<script src="lib/jquery.imagezoom.min.js"></script>
<script src="scripts/index.js"></script>
<script>
    $(function ($) {
        validatorFormEasy({
            container:".details-content",
            rules:{
                color:{
                    required:true
                },
                size:{
                    required:true
                },
                quantity:{
                    required:true
                }
            },
            callback:function(params){
                console.log(params);
                validator.resetForm();
                $("#place_an_order")[0].reset();
            }
        });

        validatorFormEasy({
            container:"#reviews",
            rules:{
                reviews:{
                    required:true
                },
                name:{
                    required:true
                },
                email:{
                    required:true,
                    email:true
                }
            },
            callback:function(params){
                console.log(params);
                validator.resetForm();
                $("#commodity")[0].reset();
            }
        });

        Follow({initState:true,controlEl:".btn-follow",callback:function(){
            validatorFormEasy({
                container:"#follow-wrapper",
                callback:function(params){
                    console.log(params);
                }
            });
            $("#follow .btn").click();
        }});

        function Follow(json){
            var that = this;
            this.initState = json.initState || false;       //控制关注按钮的初始状态
            this.clickBol = !this.initState;

            this.controlEl = $(json.controlEl);
            this.outputEl = $("[name='"+this.controlEl.attr("aria-controls")+"']");
            this.callback = json.callback || null;

            this.init = function(){
                if(this.initState){
                    this.controlEl.addClass("focus");
                }
            };

            this.controlEl.on("click",function(){
                if(that.clickBol){
                    that.controlEl.addClass("focus");
                }else{
                    that.controlEl.removeClass("focus");
                }
                that.outputEl.val(that.clickBol);
                that.clickBol = !that.clickBol;
                that.callback && that.callback.call(this);
            });

            this.init();
        }

        $(".details-slider-nav").slick({
            slidesToShow: 5,
            slidesToScroll: 5,
            infinite:false,
            responsive: [
                {
                    breakpoint: 390,
                    settings: {
                        arrows: true,
                        slidesToShow: 5
                    }
                }
            ]
        });
        /*img悬停*/
        sliderFn($(".details-slide-for"),$(".details-slider-nav"));
        /*图片放大镜*/
        var isPc = browserRedirect();
        if(isPc){
            $(".imgzoom").imagezoom();
            $(".imgzoom").parent("a").attr("target","_self");
        }else{
            $(".imgzoom").parent("a").attr("target","_blank");
        }
    });
    /*评星级*/
    $(".rating:not(.disabled)").each(function(){
        new Rating({initScore:3,controlEl:this});
    });

    function Rating(json){
        var that = this;
        this.initScore = json.initScore || 0;
        this.scoreText = json.scoreText || '';
        this.scoreTextArray = json.scoreTextArray || null;
        this.scoreTextIndex = 0;

        this.clickEl = json.clickEl || ".star";
        this.parentEl = $(json.controlEl);
        this.controlEl = this.parentEl.children(this.clickEl);
        this.outputEl = $("[name='"+this.parentEl.attr("data-output")+"']");

        this.activeIndex = -1;

        this.init = function(){
            this.outputEl.val(this.initScore);
        };

        this.getRatingDom = function(){
            var $active = that.controlEl.eq(that.activeIndex);
            $active.addClass("focus");
            $active.siblings().removeClass("focus");
        };

        this.getRatingValue = function(){
            that.score = Math.abs(that.activeIndex-5);
            that.outputEl.val(that.score);
        };

        this.controlEl.on("click",function(){
            var $this = $(this);
            that.activeIndex = $this.index();

            that.getRatingDom();
            that.getRatingValue();
        });

        this.init();
    }

    /*thumbnail缩略图*/
    function sliderFn($slideFor,$sliderNav){
        var initSrc = $sliderNav.children(".slick-slide:first").find("img").attr("big");
        $slideFor.find("img").attr("src",initSrc);
        $sliderNav.on("mouseenter click",".slick-slide",function(){
            var $this = $(this);
            var bigSrc = $this.find("img").attr("big");
            var mdSrc = $this.find("img").attr("md");
            var smallSrc = $this.find("img").attr("src");
            $slideFor.find("img").attr("src",mdSrc);
            $slideFor.find("img").attr("rel",bigSrc);
        })
    }
</script>
</body>
</html>